<template>
    <div id="login">
        <div class="left">
            <img :src="subStation && subStation.fenzhan_datu" alt="">
        </div>
        <div class="right">

            <div class="form">
                <div class="logo">
                    <img :src="subStation && subStation.fenzhan_logo" alt="">
                </div>
                <el-tabs v-model="activeName">
                    <el-tab-pane label="登陆" name="first">
                        <el-form label-position="top" :rules="loginRules" ref="loginForm" label-width="80px"
                                 @submit.native.prevent
                                 :model="loginForm">
                            <el-form-item label="账号" prop="zhanghao">
                                <el-input v-model="loginForm.zhanghao"
                                          placeholder="登录账号"

                                          prefix-icon="el-icon-user"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="mima">
                                <el-input v-model="loginForm.mima"

                                          placeholder="登录密码"
                                          type="password"
                                          prefix-icon="el-icon-unlock"

                                ></el-input>
                            </el-form-item>
                            <div class="footer">
                                <el-checkbox v-model="checked">记住密码</el-checkbox>
                                <el-button type="text">忘记密码?</el-button>
                            </div>
                            <el-button class="submit" native-type="submit" type="primary"
                                       @keyup.enter.native="loginHandel" :loading="loginLoading" @click="loginHandel">登陆
                            </el-button>
                            <div class="m-t padder ">
                                <el-divider>
                                    <svg @click="qqLogin" t="1562247580320" class="icon" viewBox="0 0 1024 1024"
                                         version="1.1"
                                         xmlns="http://www.w3.org/2000/svg" p-id="2029" width="30" height="30">
                                        <path d="M68.399765 590.615655c-37.073602 90.765025-43.465533 176.418105-14.062849 191.757941 20.45478 11.505876 53.692423-14.061849 84.374094-60.084355 11.504876 51.135451 42.186547 95.87897 84.373094 132.952572-44.743519 16.619821-74.146204 44.743519-74.146204 75.42519 0 51.135451 79.259149 93.321998 176.418105 93.321997 88.208052 0 161.07627-33.237643 175.138119-77.982162h20.45478C535.009753 990.751357 607.87897 1023.989 696.087023 1023.989c98.436943 0 176.418105-40.908561 176.418104-93.321997 0-30.68167-29.402684-58.806368-74.146203-75.42519 42.186547-37.073602 72.868217-81.817121 84.374094-132.952572 30.68067 46.022506 62.640327 71.589231 84.373093 60.084355 30.68167-15.339835 24.289739-102.270901-14.061849-191.757941-29.403684-70.311245-69.033258-122.725682-99.714929-134.230558 0-3.835959 1.278986-8.949904 1.278987-14.062849 0-26.845712-7.669918-52.413437-20.454781-72.868217v-5.112945c0-12.783863-2.555973-24.289739-7.669917-34.516629C818.813704 145.736434 701.200968 0 510.722014 0 320.24206 0 202.630323 145.736434 194.959406 329.824457c-5.112945 10.22689-7.669918 21.732767-7.669918 34.516629v5.112945c-12.783863 20.45478-20.45478 46.022506-20.45478 72.869217v14.061849c-28.123698 11.504876-69.032258 62.640327-98.434943 134.230558z"
                                              fill="#4CAFE9" p-id="2030"></path>
                                    </svg>
                                </el-divider>
                            </div>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="注册" name="second">
                        <el-form ref="registerForm" status-icon label-position="top" :rules="registerRules"
                                 label-width="80px"
                                 :model="registerForm" :hide-required-asterisk="true">
                            <el-form-item label="账号" prop="zhanghao">
                                <el-input v-model="registerForm.zhanghao"
                                          placeholder="登录账号"
                                          prefix-icon="el-icon-user"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="mima">
                                <el-input v-model="registerForm.mima"
                                          placeholder="登录密码"
                                          type="password"
                                          prefix-icon="el-icon-lock"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="重复密码" prop="mima2">
                                <el-input v-model="registerForm.mima2"
                                          placeholder="登录密码"
                                          type="password"
                                          prefix-icon="el-icon-lock"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="验证码" prop="img_code">
                                <el-input v-model="registerForm.img_code"
                                          placeholder="验证码"
                                          type="text"
                                          class="imgCode"
                                          prefix-icon="el-icon-picture"
                                >
                                    <template slot="append">
                                        <img @click="refreshImg" :src="imgCodeSrc" alt="">
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="手机号" prop="shoujihao">
                                <el-input v-model="registerForm.shoujihao"
                                          placeholder="手机号"
                                          prefix-icon="el-icon-mobile-phone"
                                >
                                    <template slot="append">
                                        <el-button :loading="sendMsgLoading" @click="getMsgCode">{{timerText}}
                                        </el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="验证码" prop="phone_code">
                                <el-input v-model="registerForm.phone_code"
                                          placeholder="验证码"
                                          prefix-icon="el-icon-lock"
                                >
                                </el-input>
                            </el-form-item>
                            <el-button class="submit" type="primary" :loading="registerLoading" @click="register">注册
                            </el-button>
                        </el-form>
                    </el-tab-pane>

                </el-tabs>


            </div>
        </div>
    </div>
</template>

<script>
    import {mapMutations, mapGetters} from 'vuex'

    export default {
        name: 'login',
        components: {},
        computed: {
            ...mapGetters(['subStation'])
        },
        data() {
            //验证重复密码
            let validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.registerForm.mima) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };

            return {
                //注册/登录面板控制
                activeName: 'first',
                checked: true,
                //验证码校验是否正确
                validateMsgCode: false,
                time: 59,
                timer: null,
                timerText: '获取验证码',
                sendMsgLoading: false,
                imgCodeSrc: '/public/index.php/captcha.html',
                //登录表单
                loginForm: {
                    zhanghao: '',
                    mima: '',
                    yaoqingma: ''
                },
                loginRules: {
                    zhanghao: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 5, message: '账号长度不能小于5个字符', trigger: 'blur'},
                    ],
                    mima: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, message: '密码长度不能小于6个字符', trigger: 'blur'},
                    ],
                },
                //登录loading
                loginLoading: false,
                //注册表单
                registerForm: {
                    zhanghao: '',
                    phone_code: '',
                    mima: '',
                    mima2: '',
                    shoujihao: '',
                    yaoqingma: '',
                    img_code: '',
                },
                //注册表单校验规则
                registerRules: {
                    zhanghao: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 5, message: '账号长度不能小于5个字符', trigger: 'blur'},
                    ],
                    mima: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, message: '密码长度不能小于6个字符', trigger: 'blur'},
                    ],
                    mima2: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                    shoujihao: [
                        {required: true, message: '请输入手机号',},
                        {pattern: /0?(13|14|15|17|18|19)[0-9]{9}/, message: '请输入正确的手机号', trigger: 'blur'}
                    ],
                    phone_code: [
                        {required: true, message: '请输入手机验证码', trigger: 'blur'},
                        {min: 4, message: '手机验证码不能小于4个字符', trigger: 'blur'},
                    ],
                    img_code: [
                        {required: true, message: '请输入验证码',},
                    ]

                },
                registerLoading: false,
                //input输入防抖
                inputTimer: null
            }
        },
        methods: {
            ...mapMutations(['SET_TOKEN']),
            //获取验证码
            async getMsgCode() {
                let a = await new Promise(resolve => {
                    this.$refs['registerForm'].validateField('img_code', (msg) => {
                        resolve(msg)
                    })
                })
                let b = await new Promise(resolve => {
                    this.$refs['registerForm'].validateField('shoujihao', (msg) => {
                        resolve(msg)
                    })
                })
                if (!a && !b && this.time === 59) {
                    this.sendMsgLoading = true;
                    this.$axios.post('/api/Start/send_msg', {
                        tel: this.registerForm.shoujihao,
                        img_code: this.registerForm.img_code
                    })
                        .then((res) => {
                            if (res.code === `200`) {
                                this.$message.success('短信验证码发送成功');
                                this.sendMsgLoading = false;
                                this.timer = setInterval(() => {
                                    this.time -= 1;
                                    this.timerText = `${this.time}s后重新获取`;
                                    if (this.time === 0) {
                                        this.timer = null;
                                        this.time = 59;
                                        this.timerText = '获取验证码';
                                        clearInterval(this.timer)
                                    }

                                }, 1000)
                            }

                        })
                }


            },
            //注册
            register() {
                this.$refs['registerForm'].validate((valid) => {
                    if (valid) {
                        this.registerLoading = true;
                        this.$axios.post('/api/Start/Registered_account', this.registerForm)
                            .then((res) => {
                                this.registerLoading = false;
                                if (res.code === `200`) {
                                    this.$message.success('注册成功');
                                    this.activeName = 'first'
                                }


                            })
                    }
                });
            },
            //登录
            loginHandel() {
                this.$refs['loginForm'].validate(valid => {
                    if (valid) {
                        this.loginLoading = true;
                        this.$axios.post('/api/Start/Sign_in', this.loginForm)
                            .then(res => {
                                this.loginLoading = false;
                                if (res.code === '200') {
                                    this.$message.success('登录成功')
                                    this.$router.push('/')

                                }

                            }).catch(e => {
                            this.loginLoading = false;
                        })
                    }
                })


            },
            //qq登陆
            qqLogin() {
                //this.$axios.post(`/api/Start/qq_Sign_in_anniu`);
                let a = document.createElement('a');
                a.setAttribute('href', `/public/index.php/api/Start/qq_Sign_in_anniu?yaoqingma=${this.loginForm.yaoqingma || ''}`);
                a.click()
            },
            //刷新图形验证码
            refreshImg() {
                this.imgCodeSrc = `/public/index.php/captcha.html?t=${Date.parse(new Date())}`
            }

        },
        mounted() {
            let token_id = this.$route.query.token_id || '';
            this.registerForm.yaoqingma = token_id;
            this.loginForm.yaoqingma = token_id;


        },
        beforeRouteLeave(to, from, next) {
            clearInterval(this.timer);
            next()
        }
    }
</script>

<style lang="less" scoped>
    .icon {
        cursor: pointer;
    }

    @media (max-width: 1170px) {
        .left {
            display: none;
        }

        .right {
            padding: 0
        }
    }

    #login {
        height: 100vh;
        position: relative;

        .left {
            width: 420px;
            height: 100%;
            background: #f7f9fc;
            position: fixed;
            left: 0;
            top: 0;
            cursor: pointer;

            img {
                width: 100%;
            }
        }

        .right {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            padding: 0 100px;

            .form {
                width: 320px;

                .logo {
                    img {
                        width: 110px;
                        margin: 0 auto;
                        display: block;
                    }
                }

                .footer {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .submit {
                    margin-top: 20px;
                    width: 100%;
                }

                .imgCode {
                    /deep/ .el-input-group__append {
                        padding: 0 10px;
                        cursor: pointer;

                        img {
                            width: 95px;
                        }
                    }
                }

                /deep/ .el-form-item__label {
                    font-size: 16px;
                }

                /deep/ .el-form-item {
                    margin-bottom: 8px;
                }

                /deep/ .el-tabs__nav-wrap {
                    &::after {
                        display: none;
                    }

                    .el-tabs__item {
                        font-size: 18px;
                        margin-top: 15px;
                        font-weight: 700;
                        color: #e1e1e3;

                        &.is-active {
                            color: rgb(8, 38, 88);
                        }
                    }

                    .el-tabs__active-bar {
                        background-color: rgb(8, 38, 88);
                    }

                }
            }
        }
    }
</style>
